<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医护端管理 - 脊柱健康监测系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header .subtitle {
            font-size: 1.2em;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .doctor-info {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }

        .doctor-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
        }

        .doctor-details {
            text-align: left;
        }

        .doctor-details h3 {
            margin-bottom: 5px;
        }

        .doctor-details p {
            opacity: 0.8;
            font-size: 0.9em;
        }

        .nav {
            background: #34495e;
            padding: 0;
        }

        .nav-list {
            display: flex;
            list-style: none;
            justify-content: center;
            flex-wrap: wrap;
        }

        .nav-item {
            margin: 0;
        }

        .nav-link {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 25px;
            transition: background 0.3s ease;
            border-radius: 0;
        }

        .nav-link:hover {
            background: #3498db;
        }

        .nav-link.active {
            background: #e74c3c;
        }

        .content {
            padding: 40px 30px;
        }

        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .stat-card .icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }

        .stat-card .value {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .stat-card .label {
            font-size: 1em;
            opacity: 0.9;
        }

        .patients-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
        }

        .search-input {
            flex: 1;
            padding: 10px 15px;
            border: 2px solid #ecf0f1;
            border-radius: 8px;
            font-size: 1em;
        }

        .search-input:focus {
            outline: none;
            border-color: #3498db;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #2980b9 0%, #1f5f8b 100%);
            transform: translateY(-2px);
        }

        .btn-success {
            background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
            color: white;
        }

        .btn-success:hover {
            background: linear-gradient(135deg, #229954 0%, #1e8449 100%);
            transform: translateY(-2px);
        }

        .btn-warning {
            background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
            color: white;
        }

        .btn-warning:hover {
            background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
            transform: translateY(-2px);
        }

        .btn-danger {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: white;
        }

        .btn-danger:hover {
            background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
            transform: translateY(-2px);
        }

        .patients-table {
            overflow-x: auto;
        }

        .patients-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .patients-table th,
        .patients-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .patients-table th {
            background: #f8f9fa;
            color: #2c3e50;
            font-weight: 600;
        }

        .patients-table tr:hover {
            background: #f8f9fa;
        }

        .patient-status {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .status-active {
            background: #d5f4e6;
            color: #27ae60;
        }

        .status-warning {
            background: #fef9e7;
            color: #f39c12;
        }

        .status-danger {
            background: #fadbd8;
            color: #e74c3c;
        }

        .patient-actions {
            display: flex;
            gap: 5px;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 0.8em;
        }

        .patient-detail-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 15px;
            padding: 30px;
            max-width: 800px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .modal-title {
            font-size: 1.5em;
            color: #2c3e50;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 2em;
            cursor: pointer;
            color: #7f8c8d;
        }

        .patient-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .info-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
        }

        .info-label {
            font-size: 0.9em;
            color: #7f8c8d;
            margin-bottom: 5px;
        }

        .info-value {
            font-weight: bold;
            color: #2c3e50;
        }

        .charts-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }

        .chart-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .chart-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
        }

        .chart-placeholder {
            height: 200px;
            background: #e9ecef;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            font-size: 1.1em;
            border: 2px dashed #bdc3c7;
            margin-bottom: 15px;
        }

        .chart-title {
            font-size: 1.1em;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .alerts-section {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
        }

        .alert-item {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            border-left: 4px solid #e67e22;
        }

        .alert-item:last-child {
            margin-bottom: 0;
        }

        .alert-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .alert-title {
            font-weight: bold;
            color: #2c3e50;
        }

        .alert-time {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .alert-content {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 50px;
        }

        @media (max-width: 768px) {
            .content {
                padding: 20px 15px;
            }
            
            .nav-list {
                flex-direction: column;
            }
            
            .doctor-info {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            .search-bar {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>👨‍⚕️ 医护端管理平台</h1>
            <p class="subtitle">专业医疗团队管理界面</p>
            <div class="doctor-info">
                <div class="doctor-avatar">👨‍⚕️</div>
                <div class="doctor-details">
                    <h3>李医生</h3>
                    <p>康复科主任 | 工号: D2024001 | 在线</p>
                </div>
            </div>
        </header>

        <nav class="nav">
            <ul class="nav-list">
                <li class="nav-item"><a href="index.html" class="nav-link">🏠 首页</a></li>
                <li class="nav-item"><a href="posture-detection.html" class="nav-link">📷 姿势识别</a></li>
                <li class="nav-item"><a href="rehabilitation.html" class="nav-link">🏃 康复训练</a></li>
                <li class="nav-item"><a href="pain-record.html" class="nav-link">📊 疼痛记录</a></li>
                <li class="nav-item"><a href="data-analysis.html" class="nav-link">📈 数据分析</a></li>
                <li class="nav-item"><a href="doctor-portal.html" class="nav-link active">👨‍⚕️ 医护端</a></li>
            </ul>
        </nav>

        <main class="content">
            <div class="dashboard-stats">
                <div class="stat-card">
                    <div class="icon">👥</div>
                    <div class="value">156</div>
                    <div class="label">管理患者总数</div>
                </div>
                <div class="stat-card">
                    <div class="icon">📊</div>
                    <div class="value">89%</div>
                    <div class="label">患者活跃度</div>
                </div>
                <div class="stat-card">
                    <div class="icon">⚠️</div>
                    <div class="value">12</div>
                    <div class="label">待处理预警</div>
                </div>
                <div class="stat-card">
                    <div class="icon">📈</div>
                    <div class="value">+15%</div>
                    <div class="label">康复改善率</div>
                </div>
                <div class="stat-card">
                    <div class="icon">💬</div>
                    <div class="value">23</div>
                    <div class="label">待回复消息</div>
                </div>
                <div class="stat-card">
                    <div class="icon">📅</div>
                    <div class="value">8</div>
                    <div class="label">今日预约</div>
                </div>
            </div>

            <div class="patients-section">
                <div class="section-title">
                    <h2>👥 患者管理</h2>
                    <button class="btn btn-primary" onclick="addPatient()">+ 添加患者</button>
                </div>
                
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索患者姓名、ID或症状...">
                    <button class="btn btn-primary">🔍 搜索</button>
                    <button class="btn btn-success">📊 导出报告</button>
                </div>

                <div class="patients-table">
                    <table>
                        <thead>
                            <tr>
                                <th>患者信息</th>
                                <th>诊断</th>
                                <th>康复阶段</th>
                                <th>最近活动</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div><strong>张先生</strong></div>
                                    <div style="color: #7f8c8d; font-size: 0.9em;">ID: P2024001</div>
                                </td>
                                <td>腰椎间盘突出</td>
                                <td>康复中期</td>
                                <td>2小时前</td>
                                <td><span class="patient-status status-active">活跃</span></td>
                                <td>
                                    <div class="patient-actions">
                                        <button class="btn btn-primary btn-sm" onclick="viewPatient('P2024001')">查看</button>
                                        <button class="btn btn-success btn-sm" onclick="editPlan('P2024001')">计划</button>
                                        <button class="btn btn-warning btn-sm" onclick="sendMessage('P2024001')">消息</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><strong>李女士</strong></div>
                                    <div style="color: #7f8c8d; font-size: 0.9em;">ID: P2024002</div>
                                </td>
                                <td>颈椎病</td>
                                <td>康复初期</td>
                                <td>1天前</td>
                                <td><span class="patient-status status-warning">需关注</span></td>
                                <td>
                                    <div class="patient-actions">
                                        <button class="btn btn-primary btn-sm" onclick="viewPatient('P2024002')">查看</button>
                                        <button class="btn btn-success btn-sm" onclick="editPlan('P2024002')">计划</button>
                                        <button class="btn btn-warning btn-sm" onclick="sendMessage('P2024002')">消息</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><strong>王先生</strong></div>
                                    <div style="color: #7f8c8d; font-size: 0.9em;">ID: P2024003</div>
                                </td>
                                <td>脊柱侧弯</td>
                                <td>康复后期</td>
                                <td>3天前</td>
                                <td><span class="patient-status status-danger">异常</span></td>
                                <td>
                                    <div class="patient-actions">
                                        <button class="btn btn-primary btn-sm" onclick="viewPatient('P2024003')">查看</button>
                                        <button class="btn btn-success btn-sm" onclick="editPlan('P2024003')">计划</button>
                                        <button class="btn btn-warning btn-sm" onclick="sendMessage('P2024003')">消息</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div><strong>陈女士</strong></div>
                                    <div style="color: #7f8c8d; font-size: 0.9em;">ID: P2024004</div>
                                </td>
                                <td>腰椎管狭窄</td>
                                <td>康复中期</td>
                                <td>5小时前</td>
                                <td><span class="patient-status status-active">活跃</span></td>
                                <td>
                                    <div class="patient-actions">
                                        <button class="btn btn-primary btn-sm" onclick="viewPatient('P2024004')">查看</button>
                                        <button class="btn btn-success btn-sm" onclick="editPlan('P2024004')">计划</button>
                                        <button class="btn btn-warning btn-sm" onclick="sendMessage('P2024004')">消息</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="charts-section">
                <h2 class="section-title">📊 患者数据分析</h2>
                <div class="chart-grid">
                    <div class="chart-item">
                        <div class="chart-placeholder">
                            <div>
                                <div style="font-size: 2em; margin-bottom: 10px;">📈</div>
                                <div>康复进度趋势</div>
                            </div>
                        </div>
                        <div class="chart-title">患者康复进度统计</div>
                    </div>
                    <div class="chart-item">
                        <div class="chart-placeholder">
                            <div>
                                <div style="font-size: 2em; margin-bottom: 10px;">📊</div>
                                <div>疼痛等级分布</div>
                            </div>
                        </div>
                        <div class="chart-title">疼痛等级分布图</div>
                    </div>
                    <div class="chart-item">
                        <div class="chart-placeholder">
                            <div>
                                <div style="font-size: 2em; margin-bottom: 10px;">🎯</div>
                                <div>训练完成率</div>
                            </div>
                        </div>
                        <div class="chart-title">训练计划完成情况</div>
                    </div>
                    <div class="chart-item">
                        <div class="chart-placeholder">
                            <div>
                                <div style="font-size: 2em; margin-bottom: 10px;">⏰</div>
                                <div>活跃时间分析</div>
                            </div>
                        </div>
                        <div class="chart-title">患者活跃时间统计</div>
                    </div>
                </div>
            </div>

            <div class="alerts-section">
                <h2 class="section-title">⚠️ 系统预警</h2>
                <div class="alert-item">
                    <div class="alert-header">
                        <div class="alert-title">🔴 疼痛等级异常</div>
                        <div class="alert-time">2小时前</div>
                    </div>
                    <div class="alert-content">患者王先生(P2024003)疼痛等级突然上升至7级，建议立即联系患者了解情况。</div>
                </div>
                <div class="alert-item">
                    <div class="alert-header">
                        <div class="alert-title">🟡 训练完成率下降</div>
                        <div class="alert-time">4小时前</div>
                    </div>
                    <div class="alert-content">患者李女士(P2024002)连续3天训练完成率低于50%，需要关注和指导。</div>
                </div>
                <div class="alert-item">
                    <div class="alert-header">
                        <div class="alert-title">🟢 康复进展良好</div>
                        <div class="alert-time">6小时前</div>
                    </div>
                    <div class="alert-content">患者张先生(P2024001)姿势评分持续提升，康复效果显著。</div>
                </div>
            </div>
        </main>

        <!-- 患者详情模态框 -->
        <div id="patientModal" class="patient-detail-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">患者详细信息</h3>
                    <button class="close-btn" onclick="closeModal()">&times;</button>
                </div>
                <div class="patient-info-grid">
                    <div class="info-item">
                        <div class="info-label">患者姓名</div>
                        <div class="info-value">张先生</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">患者ID</div>
                        <div class="info-value">P2024001</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">诊断</div>
                        <div class="info-value">腰椎间盘突出</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">康复阶段</div>
                        <div class="info-value">康复中期</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">注册时间</div>
                        <div class="info-value">2024-01-15</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">最近活动</div>
                        <div class="info-value">2小时前</div>
                    </div>
                </div>
                <div style="margin-top: 20px;">
                    <button class="btn btn-primary" onclick="editPatientPlan()">编辑康复计划</button>
                    <button class="btn btn-success" onclick="sendPatientMessage()">发送消息</button>
                    <button class="btn btn-warning" onclick="scheduleAppointment()">预约复诊</button>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>&copy; 2024 脊柱健康监测与康复指导系统 | 专业医疗管理平台</p>
        </footer>
    </div>

    <script>
        function addPatient() {
            alert('添加新患者功能\n可以录入患者基本信息、诊断结果和康复计划');
        }

        function viewPatient(patientId) {
            document.getElementById('patientModal').style.display = 'block';
        }

        function closeModal() {
            document.getElementById('patientModal').style.display = 'none';
        }

        function editPlan(patientId) {
            alert(`编辑患者 ${patientId} 的康复计划\n可以调整训练内容、强度和频率`);
        }

        function sendMessage(patientId) {
            alert(`向患者 ${patientId} 发送消息\n可以进行远程指导和沟通`);
        }

        function editPatientPlan() {
            alert('编辑康复计划\n可以调整训练内容、强度和频率');
        }

        function sendPatientMessage() {
            alert('发送患者消息\n可以进行远程指导和沟通');
        }

        function scheduleAppointment() {
            alert('预约复诊\n可以安排线下或线上复诊时间');
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('patientModal');
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        }
    </script>
</body>
</html>
